<template>
	<div class="page-container">
		<el-form
			class="el-form-modify two-col"
			ref="form"
			label-width="100px"
			:model="formData"
			:rules="rules"
		>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="图标" prop="icon">
						<icon-select v-model="formData.icon"></icon-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="菜单名称" prop="name">
						<el-input placeholder="请输入" v-model="formData.name" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="菜单编码" prop="express">
						<el-input v-model="formData.express" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否隐藏" prop="hidden">
						<el-switch v-model="formData.hidden"></el-switch>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="URL" prop="url">
						<el-input v-model="formData.url" placeholder="请输入" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="重定向URL">
						<el-input
							placeholder="请输入重定向URL"
							v-model="formData.remark"
						></el-input>
					</el-form-item>
				</el-col>
				
			</el-row>
			<el-row :gutter="24">
				<el-col :span="12">
					<el-form-item label="排序" prop="orderNum">
						<el-input-number v-model="formData.orderNum" :min="1"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item>
				<el-button type="primary" @click="save" size="small" :loading="saving">保存</el-button>
				<el-button @click="cancel()" size="small">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { menuAdd, menuEdit } from "@/api/menu";
import IconSelect from '@/components/IconSelect';

const formData = {
	express: "",
	hidden: false,
	icon: "",
	name: "",
	orderNum: 0,
	parentId: null,
	remark: "",
	url: ""
};

export default {
	name: "MenuForm",
	components: {IconSelect},
	props: ['editData'],
	data() {
		let editData = this.editData
		return {
			visible: false,
			title: editData.id ? "编辑菜单" : "新增菜单",
			formData: {
				...formData,
				...editData
			},
			rules: {},
			saving: false
		};
	},
	methods: {
		cancel(data) {
			if (data) {
				this.$emit('updateData', data);
			}
			this.$router.go(-1)
		},
		save() {
			this.$refs.form.validate(async valid => {
				if (!valid) {
					return;
				}
				try {
					this.saving = true;
					const method = this.formData.id ? menuEdit : menuAdd;
					await method(this.formData);
					this.$message.success('保存成功!');
					this.saving = false;
					this.cancel(true);
				} catch (err) {
					this.saving = false;
				}
			});
		}
	},
	created() {
		if (!this.editData) {
			this.cancel()
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container{
	overflow-x: auto;
}
</style>
